<!DOCTYPE html>
<html>
<head>
  <title>tmreport</title>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  <script src="echarts.min.js"></script>-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
   <!--导入js库-->
  <script src="https://cdn.bootcss.com/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>
        <h2 class="el-icon-document-copy">自动化测试报告</h2>
      </el-header>
      <el-container>
        <el-aside width="500px" style="margin-top: 20px">
          <el-card shadow="hover" style=";margin-bottom: 20px">
            <h3>执行成功率</h3>
            <div id="main" style="width: 500px;height:430px"></div>
          </el-card>
          <el-card shadow="hover">
            <div id="main2" style="width: 500px;height:430px;"></div>
          </el-card>
        </el-aside>
        <el-main>
           <el-row>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">本次执行情况</span>
                   <el-tag type="primary" label="执行结果" effect="dark" style="float: right" size="small">执行</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: dodgerblue">本次共执行用例 {{summary.total}} 条</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">成功率 {{(summary.success_rate * 100).toFixed(2)}}% </span>
                </el-card>
             </el-col>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">异常情况</span>
                   <el-tag type="danger" label="执行结果" effect="dark" style="float: right" size="small">异常</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: indianred">本次共有失败用例 {{summary.failed}} 条</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">失败率 {{(summary.fail_rate * 100).toFixed(2)}}% </span>
                </el-card>
             </el-col>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">持续执行</span>
                   <el-tag type="warning" label="执行结果" effect="dark" style="float: right" size="small">持续</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: #e6a23c">本次持续运行 {{summary.duration.toFixed(4)}}s</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">平均Case执行时间 {{(summary.avg_duration * 1000).toFixed(2)}} ms</span>
                </el-card>
             </el-col>
           </el-row>
           <el-card shadow="hover" style="margin-top: 20px">
             <h3>用例执行记录</h3>
             <el-alert
                     class="el-icon-info"
                    title="点击可展开下方详细日志"
                    type="warning"
                    effect="dark">
              </el-alert>
              <el-table
                :data="data.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                style="width: 100%"
                height="600"
                size="medium"
                @expand-change="expend"
                :row-key='getRowKeys'
                :expand-row-keys="expands"
                @filter-change="fliterChange"
              >
                 <el-table-column type="expand"  width="100" prop="logs">
                  <template slot-scope="scope">
                      <el-card class="content">
                          <pre id="editor" class="ace_editor" style="min-height:400px">
                            <textarea class="ace_text-input">{{scope.row.logs}}</textarea>
                          </pre>
                          <script type="application/javascript">
                            var editor = ace.edit('editor')
                              //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                            theme = "clouds"
                            language = "python"
                            editor.setTheme("ace/theme/" + theme);
                            editor.session.setMode("ace/mode/" + language);

                            //字体大小
                            editor.setFontSize(10);

                            //设置只读（true时只读，用于展示代码）
                            editor.setReadOnly(true);

                            //自动换行,设置为off关闭
                            editor.setOption("wrap", "free")

                          </script>
                      </el-card>
                     </template>
                  </el-table-column>
                <el-table-column
                  label="ID"
                  type="index"
                  :index="count"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="Case"
                  width="300"
                >
                </el-table-column>

                <el-table-column
                  prop="time"
                  label="Time"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="result"
                  label="Result"
                  :filters="[{ text: '成功', value: 1 }, { text: '失败', value: 0 }]"
                  column-key="result"
                  width="100"
                >
                  <template slot-scope="scope">
                    <i class="el-icon-circle-check" style="color: green;font-size: large" v-if="scope.row.result==1"></i>
                    <i class="el-icon-circle-close" style="color: red;font-size: large" v-if="scope.row.result==0"></i>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="doc"
                  label="Doc"
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="duration"
                  label="Duration"
                  width="150">
                  <template slot-scope="scope">
                    <span>{{(scope.row.duration*1000).toFixed(2)}} ms</span>
                  </template>
                </el-table-column>

              </el-table>
               <div class="block" style="margin-top: 20px">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 50, 100]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="data.length">
                    </el-pagination>
                  </div>
           </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</body>

  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>


  <script>

    new Vue({
      el: '#app',
      data: function() {
        return {
          visible: false,
          dialogVisible: false,
          data: [],
          tableData: ${cases},
          logs:'',
          summary: ${summary},
          expands: [],
          getRowKeys (row) {
            return row.id
          },
          currentPage: 1,
            pageSize: 10
        }
      },
      methods:{
        count(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        expend(row, expandedRows){
            var that = this
            if (expandedRows.length) {
              that.expands = []
              if (row) {
                that.expands.push(row.id)
              }
            } else {
              that.expands = []
            }
        },
        filterTag(value, row) {
          return row.result === value;
        },
        handleSizeChange(val) {
            this.pageSize = val;
          },
        handleCurrentChange(val) {
            this.currentPage=val;
        },
        fliterChange(filters){
            const filterskey = filters.result;
            console.log(filterskey)
            if (filterskey.length>0) {
              this.data = this.tableData.filter(data => {

                  return data['result'] === filterskey[0] | data['result'] === filterskey[1];
              });
              this.currentPage = 1;
              return this.data;
            }
            this.data = this.tableData;
            this.currentPage = 1;
            return this.data
        },
      },
      mounted(){
        this.data = this.tableData;
      }
    })
  </script>

  <script type="text/javascript">

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    series: [{
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
            lineStyle: {
                width: 6,
                color: [
                    [0.25, '#FF6E76'],
                    [0.5, '#FDDD60'],
                    [0.75, 'darkslateblue'],
                    [1, '#97cc64']
                ]
            }
        },
        pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
                color: 'auto'
            }
        },
        axisTick: {
            length: 12,
            lineStyle: {
                color: 'auto',
                width: 2
            }
        },
        splitLine: {
            length: 20,
            lineStyle: {
                color: 'auto',
                width: 5
            }
        },
        axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -60,
            formatter: function (value) {
                if (value === 0.875) {
                    return '优';
                }
                else if (value === 0.625) {
                    return '中';
                }
                else if (value === 0.375) {
                    return '良';
                }
                else if (value === 0.125) {
                    return '差';
                }
            }
        },
        title: {
            offsetCenter: [0, '-20%'],
            fontSize: 30
        },
        detail: {
            fontSize: 30,
            offsetCenter: [0, '30%'],
            valueAnimation: true,
            formatter: function (value) {
                return Math.round(value * 100) + '%';
            },
            color: 'auto'
        },
        data: [{
            value: ${success_rate},
            name: '执行成功率'
        }]
    }]
};

option && myChart.setOption(option);

</script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

option = {
    title: {
        text: '用例执行情况',
        subtext: '本次执行成功失败比例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: ${series_data},
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);
</script>

<style>
  .el-header, .el-footer {
    background-color: darkslateblue;
    text-align: center;
    color: white;
    /*line-height: 60px;*/
  }

  .el-col {
    margin-right: 10px;
  }

  .el-card{
    border-radius: 15px;
  }

  .el-table .cell {
    white-space: pre-line;

    }
  /*.el-aside {*/
  /*  background-color: #D3DCE6;*/
  /*  color: #333;*/
  /*  text-align: center;*/
  /*  line-height: 400px;*/
  /*}*/
</style>
</html>
